<template>
    <div class="index_page">
        <div class="index_top">
            <div class="logo">利发分账系统</div>
             <div class="op flex">
                <p>{{ $store.state.user.account.userName }}</p>
                <!-- <span class="reset_pws" @click="modifyPassword('open')">【修改密码】</span> -->
                <em>/</em>
                <span class="exit" @click="logout">【退出】</span>
                <span class="link" @click="refreshWindow">【刷新】</span>
                <!-- <div class="pad-l5 pointer flex-center">
                    <FullscreenExitOutlined v-if="$store.state.control.isFullScreen" @click="setFullScreen()" :style="{ fontSize: '18px', color: '#08c' }" />
                    <FullscreenOutlined v-else @click="setFullScreen()" :style="{ fontSize: '18px', color: '#08c' }" />
                </div> -->
            </div>
        </div>
        <div class="index_middle">
            <div class="left_menu">
                <leftMenu></leftMenu>
            </div>
            <div class="index_content">
                <div class="tabs">
                    <tabs></tabs>
                </div>
                <div class="main">
                    <router-view v-slot="{ Component, route }">
                        <!-- {{keepAliveList}} {{route.name}} -->
                        <keep-alive :include="keepAliveList" :max="30">
                            <component :key="route.name" :is="formatComponent(Component, route.name)" />
                        </keep-alive>
                    </router-view>
                </div>
            </div>
        </div>

        <lo-modal
            width="400px"
            title="修改密码"
            ref="modifyPwdRef"
            @confirm="modifyPassword('confirm')">
            <div>
                <a-form :label-col="{style: { width: '100px' }}">
                    <a-form-item label="旧密码密码">
                        <a-input-password  v-model:value="form.oldPwd" autocomplete="" placeholder="输入旧密码" />
                    </a-form-item>
                    <a-form-item label="新密码">
                        <a-input-password  v-model:value="form.newPwd" autocomplete="" placeholder="输入新密码" />
                    </a-form-item>
                </a-form>
            </div>
        </lo-modal>
    </div>

</template>

<script setup>
    import leftMenu from '@/components/public/left-menu.vue'
    import tabs from '@/components/public/tabs.vue'
    import { BellOutlined } from '@ant-design/icons-vue';
    import { computed, ref, h, onMounted } from 'vue'
    import { useStore } from 'vuex'
    import { useRouter, useRoute } from 'vue-router'
    import { toLogin } from '@/hook/login'
    import { setFullScreen } from '@/hook/document'
    import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
    import { Popover } from 'ant-design-vue'

    const Store = useStore()
    const Router = useRouter()
    const Route = useRoute()
    const keepAliveList = computed(() => {
        return Store.state.tabs.tabsList.map(i => i.name)
    })

    onMounted(() => {
    })

    // 第一步重写名称:(给component组件重命名的方法)
    const wrapperMap = new Map()
    const formatComponent = (component, name) => {
        let wrapper
        if (wrapperMap.has(name)) {
            wrapper = wrapperMap.get(name)
        } else {
            wrapper = {
                name: name,
                render() {
                    return component //h("div", { className: "jd-page-wrapper" }, component)
                },
            }
            wrapperMap.set(name, wrapper)
        }
        return h(wrapper)
    }


    // function formatComponent(component, routeName, route) {
    //     console.log(component, routeName, route);
    //     // 因为 script setup回自动按照文件名给组件一个name，这里把他的name改了。实现动态路由的name与keepAlive include中的name同步
    //     if(component) {
    //         component.type.__name = routeName
    //     }
    //     return component
    // }


    function logout() {
        Store.commit('tabs/CLEAR_TABS_LIST')
        Store.commit('user/CLEAR_USER_ACCOUNT')
        Router.replace('/login/' + (localStorage.merNo || ''))
    }

    function refreshWindow() {
        window.location.reload()
    }

    const modifyPwdRef = ref(null)
    function modifyPassword(type) {
        if(type == 'open') {
            modifyPwdRef.value.open()
        } else if(type == 'confirm') {
            console.log('do something');
            modifyPwdRef.value.close()
        }
    }


    const form = ref({
        userName: '',
        password: '',
    })



</script>

<style lang="less" scoped>
.index_page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .index_top{
        height: 42px;
        border-bottom: 1px solid @baseColor;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        position: relative;
        z-index: 10;
        *{
            position: relative;
            z-index: 5;
        }

        .logo{
            font-size: 20px;
            font-weight: bold;
            color: @baseColor;
            user-select: none;
        }
        .op{
            padding-top: 8px;
            em{
                margin: 0 5px;
            }
            .exit{
                color: @red;
                cursor: pointer;
            }
            .reset_pws{
                cursor: pointer;
                color: @baseColor;
            }
        }
    }
    .index_middle{
        flex: 1;
        height: 1px;
        display: flex;
        .left_menu {
            width: 160px;
        }
        .index_content{
            flex: 1;
            width: 1px;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #fff;
            .tabs{
                width: 100%;
                padding: 6px 6px 0 6px;
                background: #f1ede5;
            }
            .main{
                flex: 1;
                height: 1px;
                width: 100%;
                background: #f5f5f5;
                overflow: hidden;
                padding: 10px;
                >div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    overflow: auto;
                    // background: #f5f5f5;
                    border-radius: 10px;
                }
            }
        }
    }
}

.notice{
    position: relative;
    top: -2px;
    z-index: 10!important;
    cursor: pointer;
    padding-right: 20px;
    padding-left: 10px;
    .point{
        position: absolute;
        z-index: 100;
        left: 15px;
        height: 16px;
        min-width: 16px;
        line-height: 16px;
        border-radius: 8px;
        background-color: red;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 0 2px;
        text-align: center;
    }
}
.notice_content{
    width: 150px;
    user-select: none;
    .cell_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        height: 40px;
        padding: 0 10px;
        &:hover{
            background: #f6f6f6;
        }
        &:last-child{
            border-bottom: none;
        }
        em{
            color: #fff;
            height: 16px;
            border-radius: 8px;
            background: red;
            padding: 0 5px;
            line-height: 16px;
            font-size: 12px;
            font-weight: bold;
        }
    }
}
</style>
